<template>
	<view class="mainBox">
		<image class="project_image" :src="data.project_image" mode="widthFix"></image>
		<view class="textmain">
			<view class="project_name">{{data.project_name}}</view>
			<view class="project_size">{{data.project_size}}</view>
		</view>
		<view class="textmain">
			<uni-row class="demo-uni-row">
				<uni-col :span="12">服务价格</uni-col><uni-col :span="12">
					<view class="textr">{{data.project_price}}</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row">
				<uni-col :span="12">预约定金</uni-col><uni-col :span="12">
					<view class="textr">{{data.deposit_price}}</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row">
				<uni-col :span="12">化妆造型</uni-col><uni-col :span="12">
					<view class="textr">{{data.makeup}}</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row">
				<uni-col :span="12">服务时长</uni-col><uni-col :span="12">
					<view class="textr">{{data.service_time}}</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row">
				<uni-col :span="12">拍摄原片</uni-col><uni-col :span="12">
					<view class="textr">{{data.shoot_film}}</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row">
				<uni-col :span="12">原片精修</uni-col><uni-col :span="12">
					<view class="textr">{{data.truing}}</view>
				</uni-col>
			</uni-row>
		</view>
		<uni-section class="mb-10" title="样片展示" type="line"></uni-section>
		<view class="pic-uni-row">
			<uni-row>
				<uni-col :span="8" v-for="(item, index) in data.sample_image" :key="index">
					<image class="sample_image" :src="item" @click="clickimg(index)"></image>
				</uni-col>
			</uni-row>
		</view>
		<uni-section class="mb-10" title="拍摄场景" type="line"></uni-section>
		<view class="cjing"><text v-for="(item, index) in data.optional" :key="index">{{item+'/'}}</text></view>
		<uni-section class="mb-10" title="服务描述" type="line"></uni-section>
		<view class="txtBox">
			<rich-text :nodes="data.project_content"></rich-text>
		</view>
		<view class="fbtn">
			<uni-goods-nav :options='options' @buttonClick="buttonClick" :buttonGroup="buttonGroup" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [],
				buttonGroup: [{
					text: '立即预约',
					backgroundColor: '#2979ff',
					color: '#fff'
				}],
				data: {
					id: 1, //项目id
					store_id: 1, //门店id
					project_name: "证件照", //项目名称
					project_size: "90*60厘米", //项目名称
					project_image: "http://zhaoxiangguan.dyxj.top/uploads/images/20240310/a4aa0b0b8afce4dd16e69704e58a0951.jpg", //项目图片
					deposit_price: "10.00", //定金价格
					project_price: "100.00", //项目价格
					project_content: "<p>○ 本服务适合求职简历、各国签证、其他证件等。<br />\r\n○ 建议自带服装，店内提供部分正装、衬衫等。<br />\r\n○ 拍摄前我们会提供简单的化妆服务（如敏感皮肤建议自带化妆品）<br />\r\n○ 不提供卸妆用品及服务<br />\r\n○ 背景颜色： 拍摄一种背景颜色。（白、蓝、红、灰任选一种）<br />\r\n○ 提供精修数码底片一张，不提供未精修原图。<br />\r\n○ 高品质打印一份，一寸5张2寸4张。（当日可取、顺丰到付）<br />\r\n（如需特殊尺寸请咨询店内工作人员）<br />\r\n○ 高峰时段仍需等候。<br />\r\n<br />\r\n&bull; 迟到将会顺延1-2小时具体时间不确定要看门店安排！<br />\r\n<br />\r\n&bull; 预约晚上7：30时间迟到超过15分钟以上需要支付60元加班费！</p>\r\n", //项目描述
					service_time: "约3小时", //服务时长
					shoot_film: "10张不赠送", //拍摄原片
					makeup: "1组", //化妆造型
					truing: "标配一张", //精修
					sample_image: [
						"http://zhaoxiangguan.dyxj.top/uploads/images/20240310/550ed81daba1c65b291c8a1d3f8cb719.jpg",
						"http://zhaoxiangguan.dyxj.top/uploads/images/20240310/9f145809f7a08638f95040f6a65e2929.jpg",
						"http://zhaoxiangguan.dyxj.top/uploads/images/20240310/78a68333760e6ae363b280ba901cd95f.jpg",
						"http://zhaoxiangguan.dyxj.top/uploads/images/20240310/bc2aadf185c90c20a39443ff58d50ad0.jpg",
						"http://zhaoxiangguan.dyxj.top/uploads/images/20240310/1e050d3011e93f54ac7c633ec646afb8.jpg",
						"http://zhaoxiangguan.dyxj.top/uploads/images/20240310/ff1e2901ddd813dd98363a783c8151fa.jpg",
						"http://zhaoxiangguan.dyxj.top/uploads/images/20240310/ef319d307da0bc1515e92dca53bbbed3.jpg",
						"http://zhaoxiangguan.dyxj.top/uploads/images/20240310/306116b59af9bae0530b50529b8a33e3.jpg"
					], //样片展示
					photo_selection_fee: "加选照片另收￥70/张；补充说明：加修一张70元，包含打印一份！加修的电子照片7天之内会发邮箱 纸质照片可自取可快递（顺丰到付）", //照片加选费用
					optional: [
						"白色背景",
						"蓝色背景",
						"红色背景",
						"灰色背景"
					] //可选
				}
			}
		},
		onLoad() {

		},
		methods: {
			buttonClick(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/index/date'
				})
			},
			clickimg(img) {
				var i = this.data.sample_image; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: img, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>

<style lang="scss">
	.mainBox {
		width: 750rpx;
		background: #fff;
	}

	.fbtn {
		width: 100%;
		line-height: 100rpx;
		position: fixed;
		bottom: 0;
		left: -10rpx;
	}

	.sample_image {
		width: calc(670rpx / 3);
		margin-right: 20rpx;
		height: 33vw;
		margin-bottom: 20rpx;
		display: block;
	}

	.pic-uni-row {
		width: 100%;
		padding: 20rpx 0 20rpx 20rpx;


	}

	.txtBox {
		padding: 10rpx 20rpx;
		background: #fff;
	}

	.cjing {
		background: #fff;
		padding: 10rpx 20rpx;
	}

	.demo-uni-row {
		border-bottom: 1px dashed #b3b3b3;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #696969;
		background: #fff;
	}

	.textr {
		text-align: right;
	}

	.project_image {
		width: 750rpx;
		display: block;
	}

	.textmain {
		width: 710rpx;
		padding: 20rpx;
	}

	.project_name {
		font-size: 32rpx;
		font-weight: bold;
		margin: 10rpx 0;
	}

	.project_size {
		font-size: 28rpx;
		color: #666;
		margin: 10rpx 0 10rpx;
	}
</style>